// 消息
<template>
    <div class="message">
        <ShortHeader/>
        <div class="nav">
            <div class="nav_item">
                <span>通知</span>
    
            </div>
            <div class="nav_item">
                <span>聊天</span>
            </div>
        </div>
        <div class="message_block">
            <MessageItem title="通知"/>
            <MessageItem title="话题消息通知"/>
            <MessageItem title="新好友通知" path="/newFriend"/>
        </div>
    
    </div>
</template>

<script>
import ShortHeader from "../components/headershort";
import MessageItem from "../components/secondcomponent/message_item"
export default {
    name: "message",
    components: { ShortHeader, MessageItem },
    data() {
        return {

        }
    }

}
</script>
<style lang="less" scoped>
.message {
    .nav {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        margin-top: 30/75rem;
        .nav_item {
            flex-grow: 1;
            text-align: center;
            font-size: 30/75rem;
            padding: 20/75rem;
        }
        .nav_item:last-child {
            span {
                display: block;
                width: 100%;
                border-left: 4px solid #333;
            }
        }
    }
    .message_block {
        box-shadow: 0 0 15px #ccc;
        padding: 20/75rem 0;
    }
}
</style>
